    
<script type="text/javascript" src="../common/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="assets/jqcustom.js"></script>
    
    
<!--    <input id="ck" type="checkbox" name="a" class="styled" value="dddd"/>-->
<!--    <input type="radio" name="radio" class="styled" />-->
<!--    <input type="radio" name="radio" class="styled" />-->
<table id="t"></table>
<table id="t1"></table>
<input type="button" value='show checkbox checked' id="btn"></input>
<input type="button" value='show radio checked' id="btn1"></input>

    <script>
    var selected = [];
    var order = {};
    var datas = [{
      "id":1,
      "text":"1",
      "value": 'x'
    },{
      "id":2,
      "text":"2",
      "value": 'xx'
    },{
      "id":3,
      "text":"3",
      "value": 'xxx'
    },{
      "id":4,
      "text":"4",
      "value": 'xxxx'
    },{
      "id":5,
      "text":"5",
      "value": 'xxxxx'
    }];
    var table = document.getElementById('t');
    var  table1 = document.getElementById('t1');
    
    var btn = document.getElementById('btn');
    var btn1 = document.getElementById('btn1');

    
    
    showckboxtable();
    showradiotable();
    function showckboxtable() {
      for (var i = 0, il = datas.length; i < il; i++) {
        var obj = datas[i];
        var tr = table.insertRow(-1);
        td = tr.insertCell(-1);
        elm = document.createElement('input');
        elm.type = 'checkbox';
        var seled = false;
        for (var idx in selected) {
          if (obj.value == selected[idx]._obj.value) {
            seled = true;
          }
        }
        elm.checked= (seled) ? 'checked' : '';
        elm._obj = obj;
        selected.push(elm);
        td.appendChild(elm);
        td = tr.insertCell(-1);
        td.appendChild(document.createTextNode(obj.value));
      }
      $.wcheck({ });
    }
    
    function showradiotable() {
      while (table1.rows.length > 0) {
        table1.deleteRow(table1.rows.length - 1);
      }
      
	    for (var j = 0, jl = datas.length; j < jl; j++) {
	      var obj = datas[j];
	      var tr = table1.insertRow(-1);
	      td = tr.insertCell(-1);
	      elm = document.createElement('input');
	      elm.type = 'radio';
	      elm.name = 'size';
	      elm.checked= (order.albumstyle == obj.text);
	      elm._obj = obj;
	      elm.onclick = function() { 
	        order.albumstyle = this._obj.text;
	        showradiotable();
	      };
	      td.appendChild(elm);
	      td = tr.insertCell(-1);
	      td.appendChild(document.createTextNode(obj.text));
	    }
	    $.wcheck({ });
    }
    
    btn.onclick = function() {
      _deleted = [];
      for (var i in selected) {
        var obj = selected[i];
        if (obj.checked) {
          _deleted.push(obj._obj);
        }
      }
      console.log(_deleted);
    }

    btn1.onclick = function() {
      console.log(order);
    }
  </script>
